<!DOCTYPE html>

<html>
<head>
	<title></title>
<!--
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap.min.css")">
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap-responsive.min.css")">

	<link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
	
 	<script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
 -->
 	<script src="../javascripts/jquery-1.9.0.min.js" type="text/javascript"></script>
 	
	<style>
		* {
			font-family: sans-serif;
		}
		
		.baralho {
			position: absolute;
			background-color: gray;
		}
		
		.carta {
			position: absolute;
			border: 1px solid black;
			left: 50px;
			background-color: #ffffff;
		}
		
		.bloco_cor {
			margin: 5px;
		}
		
		
		
		.vermelho {
			background-color: red;
		}
		.verde {
			background-color: green;
		}
		.azul {
			background-color: blue;
		}
		.amarelo {
			background-color: yellow;
		}
		.preto {
			background-color: black;
		}
		
		
		
		
		.numero_central {
			position: absolute;
			left: 0px;
			top: 20px;
			left: 16px;
			font-size: 80px;
		}
		
		.numero_superior {
			position: absolute;
			top: 15px;
			left: 15px;
			
			font-weight: bold;
		}
		
		.numero_inferior {
			position: absolute;
			bottom: 15px;
			right: 15px;
			
			font-weight: bold;
		}
		
		.oval {
			width: 80px;
		}
		
	</style>
	
	
	<script>
		function Carta(simbolo, cor, rotacao) {
			this.simbolo = simbolo;
			this.cor = cor;
			this.rotacao = rotacao;
			this.carta;
			
			this.createDom = function () {
				this.carta =  $('<div><div>').addClass('carta');
				var bloco =  $('<div><div>').addClass('bloco_cor '+ this.cor).appendTo(this.carta);

				var ns = $('<div><div>').addClass('numero_superior').text(simbolo).appendTo(bloco);
				var nc = $('<div><div>').addClass('numero_central').text(simbolo).appendTo(bloco);
				var ni = $('<div><div>').addClass('numero_inferior').text(simbolo).appendTo(bloco);
				
				var img = $('<img/>').attr('src', 'uno_oval.png').addClass('oval').appendTo(bloco);
				
				$(this.carta).css('-moz-transform', 'rotate('+ this.rotacao +'deg)');
				$(this.carta).css('-moz-transform-origin', 'bottom left');
				
				return this.carta;
			}
			
			this.desenhar = function () {
				$('body').append(this.carta);
			}
			
			this.setPosicao = function (x, y) {
				$(this.carta).css('left', x+'px');
				$(this.carta).css('top', y+'px');
			}
			
			this.setRotacao = function (rotacao) {
				$(this.carta).css('-moz-transform', 'rotate('+ rotacao +'deg)');
				$(this.carta).css('-moz-transform-origin', 'center center');
			}
			
		}
		
		
		function Baralho(rotacao) {
			
			this.carta_largura = 92;
			this.offset = 3;
			
			this.cartas = new Array();
			this.rotacao = rotacao;
			
			this.baralho = $('<div></div>').addClass('baralho');
			

			this.addCarta = function (carta) {
				$(this.baralho).append(carta.createDom());
				carta.setPosicao(this.cartas.length * (this.carta_largura + this.offset), 0);
				
				this.cartas.push(carta);
			}
			
			this.desenhar = function () {
				 $('body').append(this.baralho);
			}
			
			this.setPosicao = function (x, y) {
				$(this.baralho).css('left', x+'px');
				$(this.baralho).css('top', y+'px');
			}
			
			this.width = function() {
				return this.cartas.length * (this.carta_largura + this.offset)
			}
			
			this.centralizar = function () {
				var telaLargura = parseInt($('body').width());
				$(this.baralho).css('left', (telaLargura - this.width())/2+'px');
			}
		}
		
	</script>
	
	

</head>
<body>

	
	<script type="text/javascript">
	
		var carta_largura = 92;
		var offset = 3;
		
		var baralho = new Baralho();
		baralho.addCarta(new Carta(0, 'vermelho', 0));
		baralho.addCarta(new Carta(2, 'vermelho', 0));
		baralho.addCarta(new Carta(7, 'verde', 0));
		baralho.addCarta(new Carta(8, 'amarelo', 0));
		baralho.addCarta(new Carta(9, 'azul', 0));
		baralho.addCarta(new Carta('#', 'preto', 0));
		baralho.addCarta(new Carta('?', 'preto', 0));
		
		baralho.setPosicao(20, 80);
		baralho.desenhar();
		baralho.centralizar();

		
		var baralho2 = new Baralho();
		baralho2.addCarta(new Carta(0, 'vermelho', 0));
		baralho2.addCarta(new Carta(2, 'vermelho', 0));
		baralho2.addCarta(new Carta(7, 'verde', 0));
		baralho2.addCarta(new Carta(8, 'amarelo', 0));
		baralho2.addCarta(new Carta(9, 'azul', 0));
		baralho2.addCarta(new Carta('#', 'preto', 0));
		baralho2.addCarta(new Carta('?', 'preto', 0));
		
		baralho2.desenhar();
		baralho2.setPosicao(20, 300);
		
		baralho2.centralizar();
		
	</script>
</body>
</html>
